<template>
  <div class="content">
    <template>
      <!-- 引入container布局 -->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div>
            <img src="../assets/logo.png"
                 alt="头像">
            <p class="title">博客管理平台</p>
          </div>
          <el-button @click="logout()">退出登录</el-button>
        </el-header>
        <!-- 主体 -->
        <el-container>
          <!-- 侧边栏 -->
          <!-- 利用三目表达式进行对页面宽度的动态配置 -->
          <el-aside :width="isCollapse?'64px':'300px'">
            <!-- 定义单击事件，动态设置折叠状态 -->
            <div class="toggle-button"
                 @click="isCollapseClick">|||</div>
            <!-- :collapse="isCollapse"绑定data中的变量 -->
            <!-- :collapse-transition="false" 使得动画变得连贯 -->
            <!-- 被选中的路径有不同的样式显示，而且可以储存在缓存中 -->
            <el-menu class="el-menu-vertical-demo"
                     @open="handleOpen"
                     @close="handleClose"
                     background-color="#545c64"
                     text-color="#fff"
                     :collapse="isCollapse"
                     :collapse-transition="false"
                     :router="true"
                     :default-active="activePath"
                     active-text-color="#ffd04b">
              <!-- mainMenu.id+'' 原因：从数字类型转换为字符串类型（router导航栏） -->
              <!-- 如果不加这个唯一标识的话，点开一个一级菜单，所有的统计菜单都会进行展开 -->
              <el-submenu :index="mainMenu.id"
                          v-for="mainMenu in menuList"
                          :key="mainMenu.id">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{mainMenu.title}}</span>
                </template>
                <!-- subMenu.id+'' 原因：从数字类型转换为字符串类型（router导航栏） -->
                <el-menu-item :index="'/home'+mainMenu.path+subMenu.path"
                              v-for="subMenu in mainMenu.subMenuList"
                              @click="savePathAndActivePath('/home'+mainMenu.path+subMenu.path)"
                              :key="subMenu.id">{{subMenu.title}}</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-aside>
          <!-- 主体内容 -->
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </template>
  </div>
</template>



<script>
// 使用axios
import axios from '../axios/index.js'
export default {
  //对数据进行绑定
  data () {
    return {
      menuList: [],
      isCollapse: false,
      activePath: ''
    }
  },
  // 一般处理ajax请求
  created () {
    //通过axios获取菜单内容
    axios.get('/getMenuList').then(res => {
      if (res.data.code == 200) {
        this.menuList = res.data.data
      } else {
        this.$message.error(res.data.message)
      }
    }).catch(e => {
      console.log(e)
    }),
      // 更新页面时，根据缓存拿到选中的路径
      this.activePath = window.sessionStorage.getItem("activePath")
  },
  // 一般方法
  methods: {
    logout () {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    isCollapseClick () {
      this.isCollapse = !this.isCollapse
    },
    savePathAndActivePath (step) {
      // 更改选中样式
      this.activePath = step
      // 存入缓存中，下次刷新页面自动打开子菜单
      window.sessionStorage.setItem("activePath", step)
    }
  }
}
 </script>

<style lang="less" scoped>
.title{
margin-left: 45px;
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.el-header {
  background-color: #373d41;
  display: flex;
  /**左右贴边 */
  justify-content: space-between; 
  /*左边界 */
  padding-left: 0%; 
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}
.el-container {
  height: 100%;
}
.el-aside {
  background-color: #333744;
  width: 200px;
  .el-menu {
    /*// 对其右边框 */
    border-right: none; 
  }
}
.el-main {
  background-color: #eaedf1;
}
img{
  width: 55px;
  height: 55px;
  margin-left: 15px;
}
// .home-container {
//   height: 100%;
// }
// .logo_img {
//   width: 20%;
//   height: 100%;
// }
// .iconfont {
//   margin-right: 10px;
// }
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  /* 显示鼠标指针为：小手 */
  cursor: pointer; 
}
</style>